<template>
  <div class="XnyGeneralDemo">
    <xny-general
      :option="generalOption"
      :search.sync="search"
      @checkbox-change="checkboxChange"
      @current-change="currentChange"
      @add="add"
      @remove="remove"
      @handleUpdate="handleUpdate"
      @handleDelete="handleDelete"
      @tabChange="tabChange"
    >
      <template #search-2>
        <!-- <div class="slot">搜索项插槽{{ value }}</div> -->
        <el-input v-model="search[2]"></el-input>
        <!-- <button @click="value = 3">cc</button> -->
      </template>
      <!-- <template #table-test_tab-id="scope">
        <div class="slot" v-if="scope.rowIndex == 0">
          表格列插槽 {{ scope }}
        </div>
        <div class="slot" v-else>{{ scope.row[scope.column.property] }}</div>
      </template> -->
      <template #toolbar-menu-Left>
        <div class="slot menuLeft">
          按钮栏插槽
          <el-button size="mini" v-show="activeTab == '测试表格'"
            >按钮1</el-button
          >
          <el-button size="mini" v-show="activeTab == '测试表格2'"
            >按钮2</el-button
          >
        </div>
      </template>
    </xny-general>
  </div>
</template>

<script>
export default {
  name: 'XnyGeneralDemo',
  data() {
    return {
      activeTab: '测试表格',
      generalOption: {
        showSearch: true, // 显示搜索栏 （true）
        showToolbar: true, // 显示工具栏 （true）
        showPage: true, // 显示分页栏 （true）
        addBtn: true, // 新增按钮 （true）
        delBtn: true, // 删除按钮 （true）
        editBtn: true, // 编辑按钮 （true）
        refreshBtn: true, // 刷新按钮 （true）
        tableOption: {
          seq: true, // 序号列 （true）
          checkbox: true, // 复选框 （false）
          menuWidth: 300, // 表格操作列宽度 （200）
          menuFixed: 'right', // 表格操作列冻结 （right）
          menu: true, // 显示操作栏 （true）
          resizable: true, // 列宽度拖拽 （true）
          stripe: true, // 斑马线条纹 （true）
          isHover: true, // 鼠标悬浮高亮 （true）
          isCurrent: true, // 单选高亮行 （false） 回调current-change
          align: 'left', // 列的对齐方式 (center)
          headerAlign: 'center', // 表头列的对齐方式 (center) 继承 align
        },
      },
      search: {},
    }
  },
  props: {},
  components: {},
  watch: {
    '$refs.xnyGeneral': {
      handler(val) {
        console.log(val)
      },
      deep: true,
    },
  },
  computed: {
    // activeTab() {
    //   console.log(this.$refs.xnyGeneral)
    //   return this.$refs?.xnyGeneral?.activeTab
    // },
  },
  methods: {
    tabChange(tab) {
      console.log(tab)
      this.activeTab = tab
    },
    checkboxChange(param) {
      console.log('复选框勾选回调：', param)
      console.log('记录集合：', param.records)
    },
    currentChange(param) {
      console.log('行点击：', param)
    },
    add() {
      console.log('工具栏-新增')
      console.log(this.activeTab)
    },
    remove() {
      console.log('工具栏-删除')
    },
    handleUpdate(row) {
      console.log('行-编辑：', row)
    },
    handleDelete(row) {
      console.log('行-删除：', row)
    },
  },
  created() {},
  mounted() {},
}
</script>

<style scoped lang="scss">
.XnyGeneralDemo {
  .slot {
    background: #fde2e2;
  }
  .menuLeft {
    display: inline-block;
    height: 100%;
    width: 200px;
  }
}
</style>
